<html>
	<head>
		<title>Learning WebGL</title>
		<script id="shader-fs" type="x-shader/x-fragment">
			void main(void) {
				gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
			}
		</script>

		<script id="shader-vs" type="x-shader/x-vertex">
			attribute vec3 position;

			uniform mat4 mvpMatrix;

			void main(void) {
				gl_Position = mvpMatrix * vec4(position, 1.0);
			}
		</script>
	</head>

	<body>
		<canvas width="500" height="500"></canvas>

		<script type="text/javascript">
			(function () {
			 var canvas = document.getElementsByTagName("canvas")[0];


			 var gl = canvas.getContext("webgl");
			 gl.viewport(0,0,canvas.width, canvas.height);


			 var program = gl.createProgram();

			 var vertexShader = gl.createShader(gl.VERTEX_SHADER);
			 gl.shaderSource(vertexShader, document.getElementById('shader-vs').innerText);
			 gl.compileShader(vertexShader);
			 gl.attachShader(program, vertexShader);


			 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
			 gl.shaderSource(fragmentShader, document.getElementById('shader-fs').innerText);
			 gl.compileShader(fragmentShader);
			 gl.attachShader(program, fragmentShader);

			 gl.linkProgram(program);
			 gl.useProgram(program);


			 gl.clearColor(0.0, -1.0, 0.0, 1.0);
			 gl.clear(gl.COLOR_BUFFER_BIT);

			 var vertices = new Float32Array([
					 0.0,  1.0,  -5.0,
					 -1.0, -1.0,  -5.0,
					 1.0, -1.0,  -5.0
					 ]);

			 var vboPosition = gl.createBuffer();
			 var attribPosition = gl.getAttribLocation(program, "position");
			 gl.bindBuffer(gl.ARRAY_BUFFER, vboPosition);
			 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
			 gl.enableVertexAttribArray(attribPosition);
			 gl.vertexAttribPointer(attribPosition, 3, gl.FLOAT, false, 0, 0);


			 var mvpMatrix = new Float32Array([
					 2.5,0,0,0,
					 0,2.5,0,0,
					 0,0,-1,-1,
					 0,0,0,0]);
			 gl.uniformMatrix4fv(gl.getUniformLocation(program, "mvpMatrix"), false, mvpMatrix);


			 gl.bindBuffer(gl.ARRAY_BUFFER, vboPosition);
			 gl.drawArrays(gl.TRIANGLES, 0, 3);
			}());
		</script>
	</body>
</html>

